<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <my-com>hello world</my-com>
        <!-- 如果子组件中没有内容 显示插槽中的内容 -->
        <my-com :msg="msg">
            <!-- 指定插槽填充位置 自定义插槽模板 -->
            <!-- 作用域插槽 scope是一个对象 显示的是插槽中传递的数据 -->
            <template v-slot:default="scope">
                <div>
                    123
                    {{scope.subMsg}}
                </div>
            </template>
            <template v-slot:slot1>
                <div>
                    456
                </div>
            </template>
            <template #slot1>
                <div>
                    789
                </div>
            </template>
        </my-com>
    </div>
    <script>
        //   创建子组件
        let mycom = {
            props:['msg'],
            data() {
                return {
                    subMsg: '我是子组件'
                }
            },
            // 声明插槽
            // 1.没有名字的插槽-默认插槽
            // 2.具名插槽
            template: `
        <div>
            子组件
            {{msg}}
            <button><slot :subMsg='subMsg'>默认内容</slot></button>
            <div>
                {{msg}}
                {{subMsg}}
                <slot name='slot1'></slot>
            </div>
        </div>
        `
        }
        Vue.component('my-com', mycom)
        new Vue({
            el: "#app",
            data: {
                msg:'father'
            },
            methods: {

            }
        })
    </script>
</body>

</html>